<template>
  <div class="songsheet">
     <div class="top"> 
      <h1>听书电台</h1>
      
      
      <ul>
          <li v-for="(item,index) in list" :key="index" @click="send1(index)" :class="{active:index==num}">{{item}}</li>
          
      </ul>
    </div>
     <div class="new">
      <ul v-show="num==0?true:false">
          <li v-for="(item,index) in verylist" :key="index" @click='send(item.id)'>
              <img :src="item.pic" alt="">
              <p>{{item.name}}</p>
              <p> <i class="fa fa-play"></i>{{item.count_play/10000+".万"}}</p>
          </li>
         
      </ul>
    </div>   
    <div class="new">
    <ul v-show="num==1?true:false">
          <li v-for="(item,index) in verylist" :key="index" @click='send(item.id)'>
              <img :src="item.pic" alt="">
              <p>{{item.name}}</p>
              <p> <i class="fa fa-play"></i>{{item.count_play/10000+".万"}}</p>
          </li>
         
      </ul>
    </div> 
  
  </div>
 
</template>

<script>

export default {
  
    data(){
        return {
            list:['最新','最热'],
            num:0,
            verylist:[],
            rcm:1
        }
    },
    methods:{
        send1(i){
            this.num=i
            this.rcm=i+1
            this.book()
        },
        send(i){
            this.$router.push({
                path:'/bookdetail',
                query:{
                    id:i
                }
            })
            
        },
        book(){
            // http://m.kuwo.cn/newh5app/api/mobile/v1/music/album/8022170?rn=20
            this.axios.get(`http://m.kuwo.cn/newh5app/api/mobile/v1/radio/rcm/${this.rcm}?rn=30`).then(res=>{
                console.log(res.data.data.list);
                this.verylist=res.data.data.list
            }).catch(err=>{
                console.log(err);
            })
        }

    },
   

    
    created(){
        this.book()
        
    }
}
</script>

<style lang="scss" scoped>
.active{
     background-color: #ffe443;
}
.songsheet{
    width: 1400px;
    margin: 0 auto;
    margin-bottom: 200px;
    .top{
        display: flex;
        ul{
          display: flex;
          
           li{
        margin-top: 10px;
           margin-left: 30px;
           display: block;
           width: 50px;
           height: 25px;
          
           text-align: center;
           line-height: 25px;
                
           }
        }
    }
    .new{
        ul{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                width: 250px;
                height: 250px;
                margin-top: 80px;
                img{
                     width: 250px;
                    height: 250px;
                    border-radius: 20px;
                }
                i{
                    color: #444;
                    
                }
                p{
                    width: 250px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>